<!--https://www.jianshu.com/p/899a3f05db36-->
<template>
    <!-- 日历组件 -->
    <div class="calendar-box">
        <table class="calendar-table">
            <thead>
            <th class="fc-day-header">日</th>
            <th class="fc-day-header">一</th>
            <th class="fc-day-header">二</th>
            <th class="fc-day-header">三</th>
            <th class="fc-day-header">四</th>
            <th class="fc-day-header">五</th>
            <th class="fc-day-header">六</th>
            </thead>
            <tbody>
            <tr>
                <td
                        v-for="(item, index) in calendarData"
                        :key="index"
                        :style="{'height': height}"
                        @click="clickDay(item)">
                        <div class="includeContent"
                             :class="{
                             'include': item.include,

                              }"
                        >
                        <slot name="day" :row="item">
                            <div class="day">
                                <span class="d_one">{{ item.day2 }}</span>
                                <!--<span class="d_two" v-if="defaultDate.indexOf(item.date)>-1">课</span>-->
                                <span class="d_2" v-if="defaultDate.indexOf(item.date2)>-1">入库：{{courseList[defaultDate.indexOf(item.date2)].in}}</span>
                            </div>
                        </slot>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
  export default {
    name: 'calendarBox',
    props: {
      type: {  // all 可选中显示的所有日期 portion 只能选中当前月份的数据
        type: String,
        default: 'portion'
      },
      defaultMonth: {  // 默认日期
        type: Date,
        default () {
          let year = new Date().getFullYear() // 当月年份
          let month = new Date().getMonth() + 1 // 当月月份
          return new Date(year, month - 1, 1)
        }
      },
      height: { //设置td高度
        type: String,
        default: '60px'
      }
    },
    data () {
      return {
        calendarData: [],
        activeData: null,
        defaultDate:[],
        courseList:[],
        allDate:[  //这里是模拟数据，一般是从后台接口获取而来，需要自己获取的时候拆分成 defaultDate 和 courseList
            {date:'2023-02-01',in:10,out:12,dev:13},
            {date:'2023-02-07',in:11,out:13,dev:14},
            {date:'2023-02-15',in:13,out:14,dev:66}
        ]
      }
    },
    created () {
      this.getCalendarDay()
      this.setData()
    },
    methods: {
      setData(){
        let _ = this
        _.defaultDate = _.allDate.map(v=>{
          return v.date
        })
        _.courseList = _.allDate.map(v=>{
          return {in:v.in,out:v.out,dev:v.dev}
        })
        console.log('_.defaultDate',_.defaultDate)
        console.log('_.courseList',_.courseList)
      },
      // 获取日历天数
      getCalendarDay () {
        let year = new Date(this.defaultMonth).getFullYear() // 当月年份
        let month = new Date(this.defaultMonth).getMonth() + 1 // 当月月份
        let days = new Date(year, month, 0).getDate() // 当月天数

        let prevYear = month === 1 ? (year - 1) : year // 上一年年份
        let prevMonth = month === 1 ? 12 : (month - 1) // 上月月份
        let prevDays = new Date(prevYear, prevMonth, 0).getDate() // 上一月天数

        let lastYear = month === 12 ? (year + 1) : year // 下一年年份
        let lastMonth = month === 12 ? 1 : (month + 1) // 下月月份
        // let lastDays = new Date(lastYear, lastMonth, 0).getDate() // 下一月天数

        let prevMonthArr = [] // 上月数据
        let nextMonthArr = [] // 下月数据
        let currentMonthArr = [] // 当月数据
        // 判断当月1号是星期几
        let firstDay = new Date(year, month - 1, 1).getDay()
        // 获取显示上月的数据
        for (let i = 0; i < firstDay; i++) {
          let day = prevDays - firstDay + (i + 1)
          let day2 = day >= 10 ? day : ('0' + day)
          let month2 = prevMonth >= 10 ? prevMonth : ('0' + prevMonth)
          prevMonthArr.push({
            year: prevYear,
            month: prevMonth,
            month2: month2,
            day: day,
            day2: day2,
            date: `${prevYear}-${prevMonth}-${day}`,
            date2: `${prevYear}-${month2}-${day2}`,
            include: false
          })
        }
        // 获取显示的下一月的数据
        for (let i = 0; i < (42 - firstDay - days); i++) {
          let day = i + 1
          let day2 = day >= 10 ? day : ('0' + day)
          let month2 = lastMonth >= 10 ? lastMonth : ('0' + lastMonth)
          nextMonthArr.push({
            year: lastYear,
            month: lastMonth,
            month2: month2,
            day: day,
            day2: day2,
            date: `${lastYear}-${lastMonth}-${day}`,
            date2: `${lastYear}-${month2}-${day2}`,
            include: false
          })
        }
        // 获取当月显示数据
        for (let i = 1; i <= days; i++) {
          let day2 = i >= 10 ? i : ('0' + i)
          let month2 = month >= 10 ? month : ('0' + month)
          currentMonthArr.push({
            year: year,
            month: month,
            month2: month2,
            day: i,
            day2: day2,
            date: `${year}-${month}-${i}`,
            date2: `${year}-${month2}-${day2}`,
            include: true
          })
        }

        this.calendarData = [...prevMonthArr, ...currentMonthArr, ...nextMonthArr]
        console.log('this.calendarData',this.calendarData)
      },
      // 设置默认值
      setDefaultValue (date) {
        if (!date) {
          this.activeData = null
          return
        }
        let year = new Date(date).getFullYear() // 当月年份
        let month = new Date(date).getMonth() + 1 // 当月月份
        let month2 = month >= 10 ? month : ('0' + month)
        let day = new Date(date).getDate()
        let day2 = day >= 10 ? day : '0' + day
        let row = {
          year: year,
          month: month,
          month2: month2,
          day: day,
          day2: day2,
          date: `${year}-${month}-${day}`,
          date2: `${year}-${month2}-${day2}`,
          include: true
        }
        this.clickDay(row)
      },
      clickDay (row) {
        if (this.type === 'portion' && !row.include) {
          this.$message.closeAll()
          this.$message({
            type: 'info',
            message: '只能选择当前月份的日期'
          })
          return
        }
        this.activeData = { ...row }
        this.$emit('click', { ...row })
        // console.log(this.activeData);
      }
    },
    watch: {
      defaultMonth(){
        this.setDefaultValue()
        this.getCalendarDay()
      }
    }
  }
</script>
<style lang="less" scoped>
@blue: #0176F6;
.calendar-box {
    background-color: #f6f6f6;
    padding: 10px;
    .calendar-table {
        width: 100%;
        border-radius: 4px;
        display: block;
        overflow: hidden;
        thead,
        tbody {
            display: flex;
            width: 100%;
        }
        tr {
            width: 100%;
        }
        th {
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #3E597B;
            box-sizing: border-box;
            display: inline-block;
            width: 14.28%;
        }
        td {
            width: 14.28%;
            display: inline-block;
            position: relative;
            font-size: 16px;
            font-weight: 500;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            border: solid 2px transparent;
            color: rgba(62, 89, 123, 0.3);
            background-color: #f5f5f5;
            padding: 5px;
            &>.includeContent{
                border: 1px solid #DDD;
                height: 46px;
                &.include {
                    color: #3E597B;
                    background-color: #fff;
                }
                &.active {
                    border: 2px solid @blue;
                    background: #BCDCFF;
                    color: @blue;
                }
                &:hover{
                    border: 2px solid @blue;
                }
            }
            .day {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                &>.d_one{
                    font-size: 12px;
                    position: absolute;
                    top: 5px;
                    left: 5px;
                }
                &>.d_2{
                    font-size: 12px;
                    width: 100%;
                    position: absolute;
                    top: 25px;
                    left: 45%;
                    transform: translateX(-50%)
                }
                &>.d_3{
                    font-size: 12px;
                    width: 100%;
                    position: absolute;
                    top: 40px;
                    left: 45%;
                    transform: translateX(-50%)
                }
                &>.d_4{
                    font-size: 12px;
                    width: 100%;
                    position: absolute;
                    top: 55px;
                    left: 45%;
                    transform: translateX(-50%)
                }
            }
            &:nth-child(1),
            &:nth-child(7),
            &:nth-child(8),
            &:nth-child(14),
            &:nth-child(15),
            &:nth-child(21),
            &:nth-child(22),
            &:nth-child(28),
            &:nth-child(29),
            &:nth-child(35),
            &:nth-child(36),
            &:nth-child(42) {
                background: #f6f6f6;  //根据自己需要，设置td周末的背景颜色
            }
        }
        tbody {
            .clickDay {
                border: solid 2px #00BBBB;
            }
        }
    }
}
</style>
